<template>
    <div>
        <div class="header flex-box">
            <h4>资产流水</h4>
        </div>
        <div class="assets-con">
            <div class="assets-con__title">
                <span>{{list.date}}汇总账单</span>
            </div>
            <div class="assets-box flex-box">
                <span>店铺名称：<b>{{list.name}}</b></span>
                <span>起始日期：<b>2018-11-01 00:00:00</b></span>
                <span>终止日期：<b>2018-11-31 12:59:59</b></span>
            </div>
            <el-card style="margin-bottom:20px;">
                <div slot="header" class="flex-box flex-box-around">
                    <span>上期余额</span>
                    <span>本期收入</span>
                    <span>本期支出</span>
                    <span>本期余额</span>
                </div>
                <div class="flex-box flex-box-around">
                    <span>¥7820.5</span>
                    <span>¥7820.5</span>
                    <span>¥7820.5</span>
                    <span>¥7820.5</span>
                </div>
            </el-card>
            <div class="flex-box flex-box-display">
                <el-card class="box-card">
                    <div slot="header">
                        <span>本期收入</span>
                    </div>
                    <div class="box-card__con">
                        <div class="box-card__con-title flex-box flex-box-display">
                            <span>业务类型</span>
                            <span>收入金额</span>
                        </div>
                        <div class="box-card__con-details ">
                            <div class="flex-box flex-box-display">
                                <span>交易收入</span>
                                <span>¥828.00</span>
                            </div>
                        </div>
                        <div class="flex-box flex-box-display">
                            <span>合计收入</span>
                            <span>¥828.00</span>
                        </div>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header">
                        <span>本期支出</span>
                    </div>
                    <div class="box-card__con">
                        <div class="box-card__con-title flex-box flex-box-display">
                            <span>业务类型</span>
                            <span>收入金额</span>
                        </div>
                        <div class="box-card__con-details ">
                            <div class="flex-box flex-box-display">
                                <span>交易服务费</span>
                                <span>¥828.00</span>
                            </div>
                            <div class="flex-box flex-box-display">
                                <span>交易手续费</span>
                                <span>¥828.00</span>
                            </div>
                            <div class="flex-box flex-box-display">
                                <span>提现</span>
                                <span>¥828.00</span>
                            </div>
                        </div>
                        <div class="flex-box flex-box-display">
                            <span>合计支出</span>
                            <span>¥828.00</span>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>

    </div>
</template>

<script>

    export default {
        components: {},
        data() {
            return {
                list: '',

            }
        },
        computed: {},
        created(){
            this.list = this.$router.query.row;
        },
        mounted() {

        },
        methods: {}
    }

</script>

<style scoped>
    .flex-box {
        display: flex;
    }

    .flex-box-around {
        justify-content: space-around;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;
        background: #fff;
    }

    .assets-con {
        width: 100%;
        height: auto;
        min-height: calc(100vh - 92px);

        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .assets-con__title {
        font-size: 16px;
        font-weight: bolder;

        padding-bottom: 10px;
        border-bottom: 1px dashed #D8D8D8;
    }

    .assets-box {
        padding: 20px 0;
        color: #999999;
    }

    .assets-box > span {
        margin-right: 60px;
    }

    .assets-box > span > b {
        color: #000000;
    }

    .box-card{
        width:665px;
    }
    .box-card__con {
        line-height:40px;
    }

    .box-card__con-title {
        height: 52px;
        border-bottom: 1px dashed #d8d8d8;
    }

    .box-card__con-details {
        height: 116px;

        border-bottom: 1px dashed #d8d8d8;
    }
</style>
<style>
.el-card__header{
    text-align:center;

    background:#D8D8D8;
}
</style>